import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';

import TrendingPage from '../page/TrendingPage';
import MyPage from '../page/MyPage';
import PopularPage from '../page/PopularPage';
import FavoritePage from '../page/FavoritePage';
import WebViewPage from '../page/WebViewPage';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function MyTab() {
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          console.log(color);
          let iconName;

          if (route.name === 'PopularPage') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'TrendingPage') {
            iconName = focused ? 'ios-trending-up' : 'ios-trending-up-outline';
          } else if (route.name === 'FavoritePage') {
            iconName = focused ? 'heart' : 'heart-outline';
          } else if (route.name === 'MyPage') {
            iconName = focused ? 'ios-person' : 'ios-person-outline';
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#2196F3',
        tabBarInactiveTintColor: 'gray',
        tabBarShowIcon: true,
        headerShown: false,
      })}>
      <Stack.Screen
        name="PopularPage"
        component={PopularPage}
        options={{
          tabBarLabel: '首页',
        }}
      />
      <Stack.Screen
        name="TrendingPage"
        component={TrendingPage}
        options={{
          tabBarLabel: '趋势',
        }}
      />
      <Stack.Screen
        name="FavoritePage"
        component={FavoritePage}
        options={{
          tabBarLabel: '收藏',
        }}
      />
      <Stack.Screen
        name="MyPage"
        component={MyPage}
        options={{
          tabBarLabel: '我的',
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={() => ({
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
          tabBarShowIcon: true,
          headerShown: false,
        })}>
        <Stack.Screen
          name="MyTab"
          component={MyTab}
          options={{headerShown: false}}
        />
        <Stack.Screen name="WebViewPage" component={WebViewPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
